<template>
    <nav class="navbar">
        <!-- 添加教练员对话框 -->
        <el-dialog title="添加角色" :visible.sync="addCoachDialogVisible" width="30%">
            <el-form>
                <el-form-item label="选择角色">
                    <el-select v-model="selectedRole" placeholder="请选择角色">
                        <el-option label="教练员" value="coach"></el-option>
                        <el-option label="球队经理" value="manager"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="newItem.name"></el-input>
                </el-form-item>
                <el-form-item label="照片">
                    <el-input v-model="newItem.avatar"></el-input>
                </el-form-item>
                <!-- 可以添加更多表单项，如 avatar -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCoachDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addRole">确定</el-button>
            </span>
        </el-dialog>
        <!-- 删除确认对话框 -->
        <el-dialog title="删除确认" :visible.sync="deleteDialogVisible" width="30%">
            <el-form>
                <el-form-item label="确认名称">
                    <el-input v-model="deletionInput" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取消</el-button>
                <el-button type="danger" @click="confirmDelete">确认删除</el-button>
            </span>
        </el-dialog>
        <el-row class="tac">
            <el-col>
                <!-- <h5>自定义颜色</h5> -->
                <el-menu @select="SwitchPage" default-active="" class="el-menu-vertical-demo" @open="handleOpen"
                    @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span><router-link to="/home/UserManagement" class="nav_item">人员储备</router-link></span>
                        </template>

                        <el-menu-item-group>
                            <template slot="title">校篮球队教练员</template>
                            <div v-for="coach in navData" :key="coach.id" v-if="coach.type === 'coach'">
                                <el-menu-item :index="'1-' + navData.indexOf(coach)"><el-avatar :size="30"
                                        :src="circleUrl"></el-avatar><span style="padding-left: 5px;">{{ coach.name
                                        }}</span></el-menu-item>
                            </div>

                        </el-menu-item-group>
                        <el-menu-item-group title="球队经理">
                            <div v-for="manager in navData" :key="manager.id" v-if="manager.type === 'manager'">
                                <el-menu-item :index="'1-' + (navData.indexOf(manager) + 2)">
                                    <el-avatar :size="30" :src="manager.avatarUrl"></el-avatar>
                                    <span style="padding-left: 5px;">{{ manager.name }}</span>
                                </el-menu-item>
                            </div>
                        </el-menu-item-group>
                        <el-submenu index="1-4">
                            <template slot="title">编辑</template>
                            <el-menu-item index="1-4-1" @click="goToAddCoach">添加</el-menu-item>
                            <el-menu-item index="1-4-2" @click="goToDeleteCoach">删除</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <router-link to="/home/SportsEquipmentManagement"
                                class="nav_item">
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">运动器材管理</span>
                        </el-menu-item>
                        </router-link><router-link to="/home/CompetitonManagement"
                                class="nav_item">
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">年度比赛记录</span>
                    </el-menu-item></router-link><router-link to="/home/Player" class="nav_item">
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">球员</span>
                    </el-menu-item></router-link><router-link to="/home/PowerManagement" class="nav_item">
                    <el-menu-item index="5">
                        <i class="el-icon-setting"></i>
                        <span slot="title">权限管理</span>
                    </el-menu-item></router-link>
                </el-menu>
            </el-col>
        </el-row>
    </nav>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
    name: 'Navbar',
    data() {
        return {
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            addCoachDialogVisible: false,
            selectedRole: '',
            newItem: {
                id: '',
                type: '',
                name: '',
                avatar: ''
            },
            deleteDialogVisible: false, // 控制删除对话框的显示
            deletionInput: '', // 用户输入的待删除对象名称
            deletionTarget: null, // 待删除的对象
        }
    },
    computed: {
        // ...mapState(['navData'])
        ...mapState({
            navData: state => state.navData
        })
    },
    methods: {
        ...mapMutations(['ADD_ITEM', 'DELETE_ITEM']),
        ...mapActions(['addItem', 'deleteItem']),
        goToAddCoach() {
            this.addCoachDialogVisible = true;
            this.selectedRole = 'coach'; // 默认选择教练员
            this.newItem = { id: '', type: '', name: '', avatar: '' };
        },
        goToDeleteCoach(coachOrManager) {
            this.deletionTarget = coachOrManager; // 暂存待删除对象
            this.deleteDialogVisible = true; // 显示删除对话框
        },
        addRole() {
            if (!this.newItem.name) {
                alert('请输入名称');
                return;
            }
            // 为 newItem 赋值并提交
            this.newItem.id = Date.now(); // 简单示例，使用时间戳作为 ID
            this.newItem.type = this.selectedRole;
            this.addItem(this.newItem); // 提交 action
            this.addCoachDialogVisible = false;
            console.log(navData)
        },
        confirmDelete() {
            // 寻找具体删除对象
            const findItem=this.navData.find(item=>{
                return item.name==this.deletionInput.trim();
            })
            console.log(findItem)
            if (findItem) {
                // 用户输入正确，执行删除操作
                this.$confirm('确定要删除吗？', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 确认删除
                    this.DELETE_ITEM(findItem); // 使用 mutation 删除项
                    this.deleteDialogVisible = false; // 关闭对话框
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    
                }).catch(() => {
                    // 用户取消删除
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            } else {
                // 用户输入错误
                this.$message.error('找不到目标对象');
            }
        },


    }
};
</script>

<style scoped>
.tac {
    overflow: hidden;
}

.navbar {
    margin-left: 20px;
    margin-top: 20px;
}

.nav_item {
    text-decoration: none;
    color: white;
}
</style>